/* eslint-disable @typescript-eslint/camelcase */
/* eslint-disable no-nested-ternary */
/* eslint-disable max-len */
/* eslint-disable consistent-return */
/**
 * Created by zhangsong on 2019-05-08.
 */
import InputGroupGrid from '@/components/InputGroupGrid';
import PDFPreview from '@/components/PDFPreview';
import Power from '@/constants/power';
import { ContractorApplication } from '@/constants/routes';
import CreatableSelect from 'react-select/creatable';
import Authorized from '@/utils/Authorized';
import { checkHkid } from '@/utils/checkhkid'
import Modals from '@/components/Modal';
import {
  Form,
  Input,
  DatePicker,
  Button,
  Radio,
  Upload,
  Icon,
  Spin,
  Modal,
  Row,
  Col,
  Tooltip,
  Checkbox,
  Select,
  message,
  Table,
} from 'antd';
import moment from 'moment';
import React, { Component } from 'react';
import { formatMessage, FormattedMessage, getLocale } from '@/utils/i18n';
import { connect } from 'dva';
import { getPageQuery, getBase64 } from '@/utils/utils';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ContractorReducer from '@/dva/application/contractor';
import Selects, { components } from 'react-select';
import UserReducer from '@/dva/user';
import Style from './index.module.scss';

const { Namespace, Effects, Reducers } = ContractorReducer;

@connect(
  state => ({
    contractorStore: state[Namespace],
    userStore: state[UserReducer.Namespace],
  }),
  dispatch => ({
    getById: data =>
      dispatch({
        type: `${Namespace}/${Effects.getContractorById}`,
        data,
      }),
    handleSubmit: data =>
      dispatch({
        type: `${Namespace}/${Effects.modifyContractorById}`,
        data,
      }),
    handPDFModalCancel: data =>
      dispatch({
        type: `${Namespace}/${Effects.handPDFModalCancel}`,
        data,
      }),
    handleSaveModalOk() {
      dispatch({
        type: `${Namespace}/${Reducers.setState}`,
        data: {
          saveSuccessModal: false,
          pdfPreviewVisible: true,
        },
      });
    },
    saveModalCancel() {
      dispatch({
        type: `${Namespace}/${Reducers.setState}`,
        data: {
          saveSuccessModal: false,
        },
      });
    },
    listSubcontractor() {
      dispatch({
        type: `${Namespace}/${Effects.listSubcontractor}`,
      });
    },
    getGroupList() {
      dispatch({
        type: `${Namespace}/${Effects.getGroupList}`,
      });
    },
    creatGroupList: data => {
      dispatch({
        type: `${Namespace}/${Effects.creatGroupList}`,
        data,
      });
    },
    getMainContractor() {
      dispatch({
        type: `${Namespace}/${Effects.getMainContractor}`,
      });
    },
    createMainContractor: data => {
      dispatch({
        type: `${Namespace}/${Effects.createMainContractor}`,
        data,
      });
    },
    modifycontralist: data => {
      dispatch({
        type: `${Namespace}/${Effects.modifycontralist}`,
        data,
      });
    },
    deletecontralist: data => {
      dispatch({
        type: `${Namespace}/${Effects.deletecontralist}`,
        data,
      });
    },
    modifygrouplist: data => {
      dispatch({
        type: `${Namespace}/${Effects.modifygrouplist}`,
        data,
      });
    },
    deletegrouplist: data => {
      dispatch({
        type: `${Namespace}/${Effects.deletegrouplist}`,
        data,
      });
    },
  }),
)
@Form.create()
class Index extends Component {
  constructor(props) {
    super(props);
    const obj = getPageQuery();
    this.state = {
      id: obj.id,
      previewVisible: false,
      previewImage: '',
      uploadPdfPreviewVisible: false,
      pdfUploadReview: '',
      grouplist: [],
      creatSeleteModal: false,
      clientX: 0,
      clientY: 0,
      menuIsopen: false,
      menuIsopentwo: false,
      creatInput: '',
      creatId: 0,
      seletype: '',
    };
  }

  componentDidMount() {
    const { id } = this.state;
    const { getById, listSubcontractor, getGroupList, getMainContractor } = this.props;
    getById(id);
    listSubcontractor();
    getGroupList();
    getMainContractor();
  }

  // 显示头像预览
  handlePhotographPreview = async file => {
    if (file.url && file.url.endsWith('.pdf')) {
      this.setState({
        uploadPdfPreviewVisible: true,
        pdfUploadReview: file.url,
      });
      return;
    }
    if (file.type === 'application/pdf') {
      if (file.url) {
        this.setState({
          uploadPdfPreviewVisible: true,
          pdfUploadReview: file.url,
        });
      } else {
        Modal.info({ title: formatMessage('applicationContractor.tips.noSupportedPDF') });
      }
      return;
    }
    if (!file.url) {
      if (file.response) {
        file.thumbUrl = file.response;
      } else {
        file.thumbUrl = await getBase64(file.originFileObj);
      }
    }

    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  };

  handlePhotographClose = () => {
    this.setState({
      previewImage: '',
      previewVisible: false,
    });
  };

  handleReset = () => {
    const { form } = this.props;
    console.log('formRef', form);
    form.resetFields();
  };

  setHeadPhoto = async list => {
    let i = 0;
    if (Array.isArray(list)) {
      for (i = 0; i < list.length; i += 1) {
        if (!list[i].url) {
          if (list[i].response) {
            list[i].thumbUrl = list[i].response;
          } else if (!list[i].thumbUrl) {
            // eslint-disable-next-line no-await-in-loop
            list[i].thumbUrl = await getBase64(list[i].originFileObj);
          }
        }
      }
    }
    return list;
  }

  handleSubmit = e => {
    e.preventDefault();
    const { form, handleSubmit, contractorStore, userStore } = this.props;
    const { id } = this.state;
    const { area } = userStore;
    const { subcontractor, contractorInfo, mainContractorList } = contractorStore;
    form.validateFieldsAndScroll(async (err, values) => {
      console.log('斤斤计较斤斤计较', err)
      if (!err) {
        const reg = new RegExp(/\s/)
        if (form.getFieldValue('newcardNo') !== contractorInfo.card_no) {
          if (form.getFieldValue('newcardNo').length !== 8) {
            return Modals.error({
              content: formatMessage('applicationCommon.readerCard.passtip'),
            });
          }
          if (reg.test(form.getFieldValue('newcardNo'))) {
            return Modals.error({
              content: formatMessage('applicationCommon.readerCard.passtip'),
            });
          }
        }
        const {
          headPhoto,
          annexes,
          checkedSpecified = [],
          contractSubcontractor,
          workerCardNo1,
          workerCardExpiredDate1,
          contractNumber,
          id_base64,
          green_base64,
          drive_base64,
          regist_base64,
          vacc_base64,
          exemption_base64,
          drive_certificate_base64,
          safety_certificate_base64,
          inspect_certificate_base64,
          identityCard,
        } = values;
        // if (!checkHkid(identityCard)) {
        //   return Modals.tips(formatMessage('applicationContractor.columns.identityCard.rez'));
        // }
        if (
          (workerCardNo1 && !workerCardExpiredDate1) ||
          (!workerCardNo1 && workerCardExpiredDate1)
        ) {
          return message.error(formatMessage('applicationContractor.columns.greencard'));
        }
        const subcontractorObj = subcontractor.reduce((prev, next) => {
          prev[next.id] = next;
          return prev;
        }, {});
        const contractSubcontractorName = subcontractorObj[contractSubcontractor];

        const areaObj = area.reduce((prev, next) => {
          prev[next.id] = next;
          return prev;
        }, {});
        checkedSpecified.sort((a, b) => Number(a) - Number(b));
        const areaSpecified = checkedSpecified.map(item => areaObj[item]);

        let i = 0;
        for (i = 0; i < headPhoto.length; i += 1) {
          if (!headPhoto[i].url) {
            if (headPhoto[i].response) {
              headPhoto[i].thumbUrl = headPhoto[i].response;
            } else if (!headPhoto[i].thumbUrl) {
              // eslint-disable-next-line no-await-in-loop
              headPhoto[i].thumbUrl = await getBase64(headPhoto[i].originFileObj);
            }
          }
        }
        let annexeList = annexes;
        if (!annexeList) {
          annexeList = [];
        }
        for (i = 0; i < annexeList.length; i += 1) {
          if (!annexeList[i].url) {
            if (annexeList[i].response) {
              annexeList[i].thumbUrl = annexeList[i].response;
            } else if (!annexeList[i].thumbUrl) {
              // eslint-disable-next-line no-await-in-loop
              annexeList[i].thumbUrl = await getBase64(annexeList[i].originFileObj);
            }
          }
        }
        let newcontractNumber = '';
        for (i = 0; i < mainContractorList.length; i += 1) {
          if (contractNumber.value === mainContractorList[i].value || contractNumber.value === mainContractorList[i].label) {
            newcontractNumber = mainContractorList[i].label
          }
        }
        const newibj = {
          body: {
            ...values,
            annexes: annexeList,
            headPhoto: await this.setHeadPhoto(headPhoto),
            id_base64: await this.setHeadPhoto(id_base64),
            drive_base64: await this.setHeadPhoto(drive_base64),
            regist_base64: await this.setHeadPhoto(regist_base64),
            vacc_base64: await this.setHeadPhoto(vacc_base64),
            green_base64: await this.setHeadPhoto(green_base64),
            exemption_base64: await this.setHeadPhoto(exemption_base64),
            drive_certificate_base64: await this.setHeadPhoto(drive_certificate_base64),
            safety_certificate_base64: await this.setHeadPhoto(safety_certificate_base64),
            inspect_certificate_base64: await this.setHeadPhoto(inspect_certificate_base64),
            cardBack: contractorStore.contractorInfo.cardBack,
            cardFront: contractorStore.contractorInfo.cardFront,
            checkedSpecified: areaSpecified,
            contractSubcontractorName,
            cardNo: contractorInfo.cardNo,
            cardGroupId: contractorInfo.cardGroupId,
            fileGroupId: contractorInfo.fileGroupId,
            contractNumber: newcontractNumber,
          },
          id,
          page: contractorStore.page,
          pageSize: contractorStore.pageSize,
          query: contractorStore.query,
        }
        console.log('走了@@@@@@@', newibj)
        handleSubmit({
          body: {
            ...values,
            annexes: annexeList,
            headPhoto: await this.setHeadPhoto(headPhoto),
            id_base64: await this.setHeadPhoto(id_base64),
            drive_base64: await this.setHeadPhoto(drive_base64),
            regist_base64: await this.setHeadPhoto(regist_base64),
            vacc_base64: await this.setHeadPhoto(vacc_base64),
            green_base64: await this.setHeadPhoto(green_base64),
            exemption_base64: await this.setHeadPhoto(exemption_base64),
            drive_certificate_base64: await this.setHeadPhoto(drive_certificate_base64),
            safety_certificate_base64: await this.setHeadPhoto(safety_certificate_base64),
            inspect_certificate_base64: await this.setHeadPhoto(inspect_certificate_base64),
            cardBack: contractorStore.contractorInfo.cardBack,
            cardFront: contractorStore.contractorInfo.cardFront,
            checkedSpecified: areaSpecified,
            contractSubcontractorName,
            cardNo: contractorInfo.cardNo,
            cardGroupId: contractorInfo.cardGroupId,
            fileGroupId: contractorInfo.fileGroupId,
            contractNumber: newcontractNumber,
          },
          id,
          page: contractorStore.page,
          pageSize: contractorStore.pageSize,
          query: contractorStore.query,
        });
      }
    });
  };

  handleSaveModalCancel = () => {
    const { history, saveModalCancel } = this.props;
    saveModalCancel();
    history.push(ContractorApplication.list.url);
  };

  handlePDFOk = () => {
    const { handPDFModalCancel, history } = this.props;
    handPDFModalCancel();
    history.push(ContractorApplication.list.url);
  };

  handlePDFCancel = () => {
    const { handPDFModalCancel, history } = this.props;
    handPDFModalCancel();
    history.push(ContractorApplication.list.url);
  };

  handleUploadPDFOk = () => {
    this.setState({
      uploadPdfPreviewVisible: false,
      pdfUploadReview: '',
    });
  };

  handleUploadPDFCancel = () => {
    this.setState({
      uploadPdfPreviewVisible: false,
      pdfUploadReview: '',
    });
  };

  normFile = e => {
    console.log('Upload event:', e);
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  // 添加的时候
  onCreateOption = str => {
    const { form, creatGroupList } = this.props;
    const { contractorInfo } = this.props.contractorStore;
    const { grouplist } = this.state;
    const lists = grouplist
    lists.push({ value: str, label: str })
    const newlist = contractorInfo.listName.concat(lists);
    this.setState({
      grouplist: lists,
    })
    form.setFieldsValue({
      groupName: newlist,
    })
    const data = [str];
    console.log('onCreateOption', data)
    creatGroupList(data)
  }

  onChangeselete = str => {
    const { form } = this.props;
    this.setState({
      grouplist: str,
    })
    form.setFieldsValue({
      groupname: str,
    })
    console.log('onChangeselete', str)
  }

  // 添加的时候
  onCreateMainList = str => {
    const { form, createMainContractor } = this.props;

    const data = [];
    data.push(str);
    form.setFieldsValue({
      contractNumber: { value: str, label: str },
    })
    createMainContractor(str)
  }

  onChangeMainList = str => {
  }

  // 访问地区的位置
  listUpdate = () => {
    const { creatId, creatInput, seletype, grouplist } = this.state;
    const { modifygrouplist, form, modifycontralist, contractorStore } = this.props;
    const { mainContractorList, groupList } = contractorStore

    this.setState({
      creatSeleteModal: false,
    })
    if (seletype === 'gro') {
      let id = null;
      let label = '';
      for (let i = 0; i < groupList.length; i += 1) {
        if (creatId === groupList[i].label || creatId === groupList[i].value) {
          id = groupList[i].value;
          label = groupList[i].label;
        }
      }
      modifygrouplist({
        data: creatInput,
        id: id || creatId,
      })
    } else {
      let id = null;
      let label = '';
      if (form.getFieldValue('contractNumber')) {
        for (let i = 0; i < mainContractorList.length; i += 1) {
          if (form.getFieldValue('contractNumber').label === mainContractorList[i].label) {
            id = mainContractorList[i].value;
            label = mainContractorList[i].label;
          }
        }
        if (form.getFieldValue('contractNumber').label === label) {
          form.setFieldsValue({
            contractNumber: { value: id, label: creatInput },
          })
        }
      }
      modifycontralist({
        data: creatInput,
        id: id || creatId,
      })
    }
  }

  // 访问地区的位置
  listDelete = () => {
    const { creatId, creatInput, seletype } = this.state;
    const { deletegrouplist, form, deletecontralist, contractorStore } = this.props;
    const { mainContractorList, groupList } = contractorStore
    this.setState({
      creatSeleteModal: false,
    })
    if (seletype === 'gro') {
      let id = null;
      let label = '';
      if (form.getFieldValue('groupName')) {
        for (let i = 0; i < groupList.length; i += 1) {
          if (form.getFieldValue('groupName').label === groupList[i].label) {
            id = groupList[i].value;
            label = groupList[i].label;
          }
        }
        if (form.getFieldValue('groupName').label === label) {
          form.setFieldsValue({
            contractNumber: null,
          })
        }
      }
      deletegrouplist(creatId)
    } else {
      let id = null;
      let label = '';
      if (form.getFieldValue('contractNumber')) {
        for (let i = 0; i < mainContractorList.length; i += 1) {
          if (form.getFieldValue('contractNumber').label === mainContractorList[i].label) {
            id = mainContractorList[i].value;
            label = mainContractorList[i].label;
          }
        }
        if (form.getFieldValue('contractNumber').label === label) {
          form.setFieldsValue({
            contractNumber: null,
          })
        }
      }
      deletecontralist(creatId)
    }
  }

  // 自定义可选项
  Option = (event, str) => {
    const { data } = event;
    return (
      <components.Option {...event}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>{data.label}</div>
          <Button onClick={e => {
            e.stopPropagation();
            e.preventDefault();
            const left = e.clientX - (window.innerWidth / 2);
            this.setState({
              creatSeleteModal: true,
              clientX: left,
              clientY: e.clientY,
              creatInput: data.label,
              creatId: data.value,
              seletype: str,
            })
          }} style={{ zIndex: 1000, color: '#000' }} type="link" icon="more" />
        </div>
      </components.Option>
    );
  };

  renderColumns = () => [
    {
      title: formatMessage({ id: 'baseInfo.actionpeople' }),
      dataIndex: 'operate_user',
    },
    {
      title: formatMessage({ id: 'baseInfo.actionstate' }),
      dataIndex: 'operate_status',
      render: (text, record, index) => {
        console.log('operate_status', text, record, index)
        let status = '';
        switch (text) {
          case 0:
            status = formatMessage('baseInfo.needApprovalStatus')
            break;
          case 1:
            status = formatMessage('applicationStaff.columns.checkedApproved.approved')
            break;
          case -1:
            status = formatMessage('applicationStaff.columns.checkedApproved.disapproved')
            break;
          case 3:
            status = formatMessage('applicationContractor.temporary.cancelled')
            break;
          default:
            status = ''
            break;
        }
        return (
          <div>
            {status}
          </div>
        );
      },
    },
    {
      title: formatMessage({ id: 'baseInfo.actiondate' }),
      dataIndex: 'operate_date',
    },
  ]

  render() {
    const { form, contractorStore = {}, userStore = {}, handleSaveModalOk } = this.props;
    const { getFieldDecorator } = form;

    const {
      previewVisible,
      previewImage,
      uploadPdfPreviewVisible,
      pdfUploadReview,
      grouplist,
      menuIsopentwo,
      creatInput,
      creatSeleteModal,
      clientX,
      clientY,
      menuIsopen,

    } = this.state;
    const {
      saveLoading,
      contractorInfo = {},
      pdfPreviewVisible,
      pdfReview,
      saveSuccessModal,
      subcontractor,
      groupList,
      mainContractorList,
    } = contractorStore;
    const { area, workerType, currentUser } = userStore;
    let headPhotoUpload = true;
    const headPhoto = form.getFieldValue('headPhoto');
    if (headPhoto && Array.isArray(headPhoto) && headPhoto.length > 0) {
      headPhotoUpload = false;
    } else if (
      headPhoto === undefined &&
      contractorInfo.headPhoto &&
      contractorInfo.headPhoto.length > 0
    ) {
      headPhotoUpload = false;
    }
    let annexesUpload = true;
    const annexes = form.getFieldValue('annexes');
    if (annexes && Array.isArray(annexes) && annexes.length > 10) {
      annexesUpload = false;
    }
    const zoneTips = Array.isArray(area) ? (
      <div className={Style.zoneTipsWrapper}>
        {area.map(item => (
          <div
            key={item.id + (getLocale() === 'en-US' ? item.areaDescEn : item.areaDescZh)}
            className={Style.zoneTipsRow}
          >
            <div className={Style.zoneTipsLabel}>{item.areaCode}</div>
            <div>=</div>
            <div>{getLocale() === 'en-US' ? item.areaDescEn : item.areaDescZh}</div>
          </div>
        ))}
      </div>
    ) : null;
    const newgrouplist = groupList;
    const newstategroup = grouplist;
    console.log('先看数据显', area, currentUser, contractorInfo)
    // if (currentUser?.checked_specified) {
    //   for (i in currentUser?.checked_specified) {
    //     console.log('看看书和实话实说', i)
    //   }
    // }
    // const checkmo =
    for (let i = 0; i < newgrouplist.length; i += 1) {
      for (let k = 0; k < newstategroup.length; k += 1) {
        if (newgrouplist[i].label === newstategroup[k].label) {
          newstategroup[k].value = newgrouplist[i].value
        }
      }
    }
    let disabled = false;
    if (currentUser.role_id === '110') {
      disabled = true
    }
    // if (currentUser.role_id === '110' && contractorInfo?.status === 0) {
    //   disabled = false
    // } else if (currentUser.role_id === '111') {
    //   disabled = false
    // } else if (currentUser.role_id === '100' && contractorInfo?.status !== 1) {
    //   disabled = false
    // }


    return (
      <PageHeaderWrapper>
        <Spin spinning={!!saveLoading} size="large">
          <div className={`${Style.body} contractor-add-wrapper`}>
            <div className={Style.excelTitle}>
              <h1>AIRPORT AUTHORITY HONG KONG</h1>
              <h1>PROJECT SITE</h1>
              <h1>APPLICATION FOR CONTRACTORS&apos; SECURITY PASS</h1>
            </div>
            <Modal
              style={{ top: clientY + 20, left: clientX }}
              visible={creatSeleteModal}
              footer={null}
              closable={false}
              mask={false}
              maskClosable
              width={200}
              onCancel={() => {
                this.setState({
                  creatSeleteModal: false,
                })
              }}
            >
              <div>
                <Input maxLength={50} value={creatInput} onChange={e => {
                  console.log('eeee', e)
                  this.setState({
                    creatInput: e.target.value,
                  })
                }} />
                <div style={{ marginTop: 10, display: 'flex', justifyContent: 'space-between' }}>
                  <Button type="primary" onClick={() => this.listUpdate()}>
                    {formatMessage('button.update')}
                  </Button>
                  <Button type="primary" onClick={() => this.listDelete()}>
                    {formatMessage('button.remove')}
                  </Button>
                </div>
              </div>
            </Modal>
            <Modal
              visible={previewVisible}
              footer={null}
              onCancel={() => {
                this.handlePhotographClose();
              }}
            >
              <img alt="example" style={{ width: '100%' }} src={previewImage} />
            </Modal>
            <Modal
              visible={saveSuccessModal}
              title={formatMessage('baseInfo.saveSuccess')}
              okText={Authorized.check(
                Power.ContractorApplication.preview,
                formatMessage('baseInfo.previewPDF'),
                null,
              )}
              cancelText={formatMessage('baseInfo.goToList')}
              onOk={Authorized.check(
                Power.ContractorApplication.preview,
                () => handleSaveModalOk(),
                null,
              )}
              onCancel={() => this.handleSaveModalCancel()}
              footer={[
                <Button onClick={() => this.handleSaveModalCancel()}>
                  {formatMessage('baseInfo.goToList')}
                </Button>,
              ]}
            >
              <p>{formatMessage('applicationCommon.workerCard.pdfmessage')}</p>
            </Modal>
            <PDFPreview
              visible={pdfPreviewVisible}
              url={pdfReview}
              onOk={this.handlePDFOk}
              onCancel={this.handlePDFCancel}
              printing={Authorized.check(Power.ContractorApplication.printing, true, false)}
            />
            <PDFPreview
              visible={uploadPdfPreviewVisible}
              url={pdfUploadReview}
              onOk={this.handleUploadPDFOk}
              onCancel={this.handleUploadPDFCancel}
              printing={false}
            />
            <Form labelAlign="right" disabled onSubmit={this.handleSubmit}>
              <div className={Style.part}>
                <div className={Style.title}>
                  <strong>Part A</strong>
                  <i>(TO BE COMPLETED BY THE APPLICANT)</i>
                </div>
                <div className={Style.main}>
                  <div className={Style.index}>1</div>
                  <div className={Style.detailWrapper}>
                    {/* eslint-disable-next-line react/no-unescaped-entities */}
                    <div>Applicant's Particulars</div>
                    <div className={Style.table}>
                      <Row type="flex">
                        <Col xs={24} sm={8} md={8} order={3}>
                          <div className={Style.row}>
                            <Form.Item>
                              {getFieldDecorator('headPhoto', {
                                initialValue: contractorInfo.headPhoto,
                                valuePropName: 'fileList',
                                getValueFromEvent: this.normFile,
                                rules: [
                                  {
                                    required: true,
                                    message: formatMessage(
                                      'applicationContractor.columns.headPhoto.errMessage',
                                    ),
                                  },
                                ],
                              })(
                                <Upload
                                  disabled={false}
                                  listType="picture-card"
                                  accept="image/*"
                                  customRequest={async ({ file, onSuccess }) => {
                                    const base64 = await new Promise(resolve => {
                                      const fileReader = new FileReader();
                                      fileReader.readAsDataURL(file);
                                      fileReader.onload = () => {
                                        resolve(fileReader.result);
                                      };
                                    });
                                    onSuccess(base64);
                                    return {
                                      abort() { },
                                    };
                                  }}
                                  onPreview={this.handlePhotographPreview}
                                  showUploadList
                                >
                                  {headPhotoUpload ? (
                                    <div>
                                      <div className="ant-upload-text">
                                        <Icon type="plus" />
                                        {formatMessage({
                                          id: 'applicationContractor.columns.headPhoto.name',
                                        })}
                                      </div>
                                    </div>
                                  ) : null}
                                </Upload>,
                              )}
                            </Form.Item>
                          </div>
                        </Col>
                        <Col xs={24} sm={16} md={16} order={1}>
                          <div className={Style.row}>
                            <Form.Item
                              label={formatMessage(
                                'applicationContractor.columns.surname.longText',
                              )}
                            >
                              {getFieldDecorator('surname', {
                                initialValue: contractorInfo.surname,
                                rules: [
                                  {
                                    required: true,
                                    message: formatMessage(
                                      'applicationContractor.columns.surname.errMessage',
                                    ),
                                  },
                                ],
                              })(<Input disabled={disabled} maxLength={50} className={Style.inputs} />)}
                            </Form.Item>
                          </div>
                          <div className={`${Style.row} ${Style.column2}`}>
                            <div>
                              <Form.Item
                                label={formatMessage(
                                  'applicationContractor.columns.otherName.name',
                                )}
                              >
                                {getFieldDecorator('otherName', {
                                  initialValue: contractorInfo.otherName,
                                })(<Input disabled={disabled} maxLength={50} />)}
                              </Form.Item>
                            </div>
                            <div>
                              <Form.Item
                                label={formatMessage('applicationContractor.columns.sex.name')}
                              >
                                {getFieldDecorator('sex', {
                                  initialValue: contractorInfo.sex,
                                  rules: [
                                    {
                                      required: true,
                                      message: formatMessage(
                                        'applicationContractor.columns.sex.errMessage',
                                      ),
                                    },
                                  ],
                                })(
                                  <Radio.Group disabled={disabled}>
                                    <Radio value={0}>{formatMessage('baseInfo.male')}</Radio>
                                    <Radio value={1}>{formatMessage('baseInfo.female')}</Radio>
                                  </Radio.Group>,
                                )}
                              </Form.Item>
                            </div>
                          </div>
                          <div className={Style.row}>
                            <Form.Item
                              label={formatMessage('applicationContractor.columns.nameAlias.name')}
                            >
                              {getFieldDecorator('nameAlias', {
                                initialValue: contractorInfo.nameAlias,
                              })(<Input disabled={disabled} maxLength={50} className={Style.inputs} />)}
                            </Form.Item>
                          </div>
                          <div className={Style.row}>
                            <Form.Item
                              label={formatMessage(
                                'applicationContractor.columns.commercialCodeAlias.name',
                              )}
                            >
                              {getFieldDecorator('commercialCodeAlias', {
                                initialValue: contractorInfo.commercialCodeAlias,
                              })(<InputGroupGrid disableds={disabled} />)}
                            </Form.Item>
                          </div>
                        </Col>
                      </Row>
                      <div className={Style.row}>
                        <Form.Item
                          label={
                            <div
                              style={{
                                display: 'inline-block',
                                lineHeight: '24px',
                              }}
                            >
                              Hong Kong Identity Card / Passport /
                              <br />
                              Imported Labour Identity Card Number:
                            </div>
                          }
                          colon={false}
                        >
                          {getFieldDecorator('identityCard', {
                            initialValue: contractorInfo.identityCard,
                            rules: [
                              {
                                required: true,
                                message: formatMessage(
                                  'applicationContractor.columns.identityCard.errMessage',
                                ),
                              },
                              // {
                              //   pattern: '^[A-Z]{1,2}[0-9]{6}\\(?[0-9A]\\)?$',
                              //   message: formatMessage(
                              //     'applicationContractor.columns.identityCard.rez',
                              //   ),
                              // },
                            ],
                          })(<Input disabled={disabled} maxLength={50} />)}
                        </Form.Item>
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.annexes.name')}
                        // extra="表格扫描文件"
                        >
                          {getFieldDecorator('id_base64', {
                            initialValue: contractorInfo.id_base64,
                            valuePropName: 'fileList',
                            getValueFromEvent: this.normFile,
                          })(
                            <Upload
                              disabled={false}
                              accept=".pdf,image/*"
                              listType="picture"
                              customRequest={async ({ file, onSuccess }) => {
                                const base64 = await new Promise(resolve => {
                                  const fileReader = new FileReader();
                                  fileReader.readAsDataURL(file);
                                  fileReader.onload = () => {
                                    resolve(fileReader.result);
                                  };
                                });
                                onSuccess(base64);
                                return {
                                  abort() { },
                                };
                              }}
                              onPreview={this.handlePhotographPreview}
                            >
                              {annexesUpload ? (
                                <Button disabled={disabled}>
                                  <Icon type="upload" />
                                  {formatMessage('applicationStaff.columns.annexes.button')}
                                </Button>
                              ) : null}
                            </Upload>,
                          )}
                        </Form.Item>
                      </div>
                      <div className={Style.row}>
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.birthday.longText')}
                        >
                          {getFieldDecorator('birthday', {
                            initialValue: contractorInfo.birthday
                              ? moment(contractorInfo.birthday)
                              : null,
                          })(<DatePicker disabled={disabled} format={formatMessage('datetimeFormat.date')} />)}
                        </Form.Item>
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationContractor.columns.placeOfBirth.name')}
                          >
                            {getFieldDecorator('placeOfBirth', {
                              initialValue: contractorInfo.placeOfBirth,
                            })(<Input disabled={disabled} maxLength={50} className={Style.inputs} />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationContractor.columns.nationality.name')}
                          >
                            {getFieldDecorator('nationality', {
                              initialValue: contractorInfo.nationality,
                            })(<Input disabled={disabled} maxLength={50} />)}
                          </Form.Item>
                        </div>
                      </div>
                      <div className={Style.row}>
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.address.name')}
                        >
                          {getFieldDecorator('address', {
                            initialValue: contractorInfo.address,
                            rules: [
                              {
                                required: true,
                                message: formatMessage(
                                  'applicationContractor.columns.address.errMessage',
                                ),
                              },
                            ],
                          })(<Input disabled={disabled} maxLength={255} />)}
                        </Form.Item>
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationContractor.columns.telephone.name')}
                          >
                            {getFieldDecorator('telephone', {
                              initialValue: contractorInfo.telephone,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationContractor.columns.telephone.errMessage',
                                  ),
                                },
                                {
                                  pattern: '^[0-9]{8,8}$',
                                  message: formatMessage(
                                    'applicationContractor.columns.emergencyContactedName.rez',
                                  ),
                                },
                              ],
                            })(<Input disabled={disabled} maxLength={50} />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.telephoneSpare.name',
                            )}
                          >
                            {getFieldDecorator('telephoneSpare', {
                              initialValue: contractorInfo.telephoneSpare,
                              rules: [
                                {
                                  pattern: '^[0-9]{8,8}$',
                                  message: formatMessage(
                                    'applicationContractor.columns.emergencyContactedName.rez',
                                  ),
                                },
                              ],
                            })(<Input disabled={disabled} maxLength={50} />)}
                          </Form.Item>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className={Style.main}>
                  <div className={Style.index}>2</div>
                  <div className={Style.detailWrapper}>
                    <div>In case of Emergency the following person should be contacted :</div>
                    <div className={Style.table}>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.emergencyContactedName.longText',
                            )}
                          >
                            {getFieldDecorator('emergencyContactedName', {
                              initialValue: contractorInfo.emergencyContactedName,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationContractor.columns.emergencyContactedName.errMessage',
                                  ),
                                },
                              ],
                            })(<Input disabled={disabled} maxLength={50} />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.emergencyContactedRelationship.name',
                            )}
                          >
                            {getFieldDecorator('emergencyContactedRelationship', {
                              initialValue: contractorInfo.emergencyContactedRelationship,
                            })(<Input disabled={disabled} maxLength={50} />)}
                          </Form.Item>
                        </div>
                      </div>
                      <div className={Style.row}>
                        <Form.Item
                          label={formatMessage(
                            'applicationContractor.columns.emergencyContactedAddress.name',
                          )}
                        >
                          {getFieldDecorator('emergencyContactedAddress', {
                            initialValue: contractorInfo.emergencyContactedAddress,
                            rules: [
                              {
                                required: true,
                                message: formatMessage(
                                  'applicationContractor.columns.emergencyContactedAddress.errMessage',
                                ),
                              },
                            ],
                          })(
                            <Input.TextArea
                              disabled={disabled}
                              maxLength={1000}
                              autoSize={{
                                minRows: 2,
                                maxRows: 6,
                              }}
                            />,
                          )}
                        </Form.Item>
                      </div>
                      <div className={Style.row}>
                        <Form.Item
                          label={formatMessage(
                            'applicationContractor.columns.emergencyContactedTelephone.name',
                          )}
                        >
                          {getFieldDecorator('emergencyContactedTelephone', {
                            initialValue: contractorInfo.emergencyContactedTelephone,
                            rules: [
                              {
                                required: true,
                                message: formatMessage(
                                  'applicationContractor.columns.emergencyContactedTelephone.errMessage',
                                ),
                              },
                              {
                                pattern: '^[0-9]{8,8}$',
                                message: formatMessage(
                                  'applicationContractor.columns.emergencyContactedName.rez',
                                ),
                              },
                            ],
                          })(<Input disabled={disabled} maxLength={50} />)}
                        </Form.Item>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div className={Style.part}>
                <div className={Style.title}>
                  <strong>Part B</strong>
                  <i>(TO BE COMPLETED BY THE CONTRACTOR CONCERNED)</i>
                </div>
                <div className={Style.main}>
                  <div className={Style.detailWrapper}>
                    {/* eslint-disable-next-line react/no-unescaped-entities */}
                    <div>To : Security Manager ( Airport Authority Hong Kong )</div>
                    <div className={Style.table}>
                      <div className={Style.row}>
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.contractNumber.name')}
                        >
                          {getFieldDecorator('contractNumber', {
                            initialValue: contractorInfo.contractNumberobj,
                            rules: [
                              {
                                required: true,
                                message: formatMessage(
                                  'applicationContractor.columns.contractNumber.errMessage',
                                ),
                              },
                            ],
                          })(<CreatableSelect
                            isDisabled={disabled}
                            styles={{
                              menu: base => ({
                                ...base,
                                zIndex: 10,
                              }),
                              // control: base => ({
                              //   ...base,
                              //   height: '35px !important',
                              // }),
                              input: base => ({
                                ...base,
                                // height: '35px !important',
                                // backgroundColor: 'pink',

                              }),
                              multiValue: base => ({
                                ...base,
                                // backgroundColor: 'pink',
                                // height: '25px !important',
                                display: 'flex',
                                alignItems: 'center',
                              }),
                              valueContainer: base => ({
                                ...base,
                                height: '45px !important',
                              }),
                            }}
                            style={{ height: 20 }}
                            menuIsOpen={menuIsopen}
                            onMenuOpen={() => {
                              this.setState({
                                menuIsopen: !menuIsopen,
                              })
                            }}
                            onMenuClose={() => {
                              if (creatSeleteModal) {
                                return;
                              }
                              this.setState({
                                menuIsopen: false,
                              })
                            }}
                            // isMulti
                            components={{ Option: e => this.Option(e, 'con') }}
                            onCreateOption={this.onCreateMainList}
                            onChange={this.onChangeMainList}
                            options={mainContractorList}
                            placeholder={formatMessage('baseInfo.placeholderChecked')}
                          />)}
                        </Form.Item>
                      </div>
                      <div className={Style.row}>
                        {formatMessage('applicationContractor.text.partB.company')}
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.contractPosition.name',
                            )}
                          >
                            {getFieldDecorator('contractPosition', {
                              initialValue: contractorInfo.contractPosition,
                            })(<Input disabled={disabled} maxLength={50} />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.contractSubcontractor.name',
                            )}
                          >
                            {getFieldDecorator('contractSubcontractor', {
                              initialValue: contractorInfo.contract_subcontractor_id,
                            })(
                              <Select
                                disabled={disabled}
                                showSearch
                                style={{ width: '100%' }}
                                placeholder={formatMessage('baseInfo.placeholderChecked')}
                                optionFilterProp="children"
                                loading={subcontractor === null}
                                filterOption={(input, option) =>
                                  option.props.children
                                    .toLowerCase()
                                    .indexOf(input.toLowerCase()) >= 0
                                }
                              >
                                {Array.isArray(subcontractor)
                                  ? subcontractor.map(item => (
                                    <Select.Option
                                      key={item.id}
                                      value={item.id}
                                    >{`${item.name}`}</Select.Option>
                                  ))
                                  : null}
                              </Select>,
                            )}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.contractEmployer.name',
                            )}
                          >
                            {getFieldDecorator('contractEmployer', {
                              initialValue: contractorInfo.contractEmployer,
                            })(<Input disabled={disabled} maxLength={50} />)}
                          </Form.Item>
                        </div>
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationContractor.columns.contractFrom.name')}
                          >
                            {getFieldDecorator('contractFrom', {
                              initialValue: contractorInfo.contractFrom
                                ? moment(contractorInfo.contractFrom)
                                : null,
                            })(<DatePicker disabled={disabled} format={formatMessage('datetimeFormat.date')} />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationContractor.columns.contractTo.name')}
                          >
                            {getFieldDecorator('contractTo', {
                              initialValue: contractorInfo.contractTo
                                ? moment(contractorInfo.contractTo)
                                : null,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationContractor.columns.contractTo.errMessage',
                                  ),
                                },
                              ],
                            })(<DatePicker disabled={disabled} format={formatMessage('datetimeFormat.date')} />)}
                          </Form.Item>
                        </div>
                      </div>

                      <div className={Style.row}>
                        <Form.Item
                          label={formatMessage(
                            'applicationContractor.columns.contractResident.name',
                          )}
                        >
                          {getFieldDecorator('contractResident', {
                            initialValue: contractorInfo.contractResident,
                          })(
                            <Radio.Group disabled={disabled}>
                              <Radio value={1}>
                                <FormattedMessage id="applicationContractor.columns.contractResident.resident" />
                              </Radio>
                              <Radio value={0}>
                                <FormattedMessage id="applicationContractor.columns.contractResident.unresident" />
                              </Radio>
                            </Radio.Group>,
                          )}
                        </Form.Item>
                      </div>
                      <div className={Style.row}>
                        <div>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.contractApplicantDrive.name',
                            )}
                          >
                            {getFieldDecorator('contractApplicantDrive', {
                              initialValue: contractorInfo.contractApplicantDrive,
                            })(
                              <Radio.Group disabled={disabled}>
                                <Radio value={1}>
                                  <FormattedMessage id="applicationContractor.columns.contractApplicantDrive.applicant" />
                                </Radio>
                                <Radio value={0}>
                                  <FormattedMessage id="applicationContractor.columns.contractApplicantDrive.disApplicant" />
                                </Radio>
                              </Radio.Group>,
                            )}
                          </Form.Item>
                        </div>
                        <Form.Item
                          label={formatMessage(
                            'applicationContractor.columns.drivingLicenseExpire.name',
                          )}
                        >
                          {getFieldDecorator('drivingLicenseExpire', {
                            initialValue: contractorInfo.drivingLicenseExpire
                              ? moment(contractorInfo.drivingLicenseExpire)
                              : null,
                          })(<DatePicker disabled={false} format={formatMessage('datetimeFormat.date')} />)}
                        </Form.Item>
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.annexes.name')}
                        // extra="表格扫描文件"
                        >
                          {getFieldDecorator('drive_base64', {
                            initialValue: contractorInfo.drive_base64,
                            valuePropName: 'fileList',
                            getValueFromEvent: this.normFile,
                          })(
                            <Upload
                              disabled={false}
                              accept=".pdf,image/*"
                              listType="picture"
                              customRequest={async ({ file, onSuccess }) => {
                                const base64 = await new Promise(resolve => {
                                  const fileReader = new FileReader();
                                  fileReader.readAsDataURL(file);
                                  fileReader.onload = () => {
                                    resolve(fileReader.result);
                                  };
                                });
                                onSuccess(base64);
                                return {
                                  abort() { },
                                };
                              }}
                              onPreview={this.handlePhotographPreview}
                            >
                              {annexesUpload ? (
                                <Button disabled={false}>
                                  <Icon type="upload" />
                                  {formatMessage('applicationStaff.columns.annexes.button')}
                                </Button>
                              ) : null}
                            </Upload>,
                          )}
                        </Form.Item>
                      </div>
                      <div className={Style.row}>
                        <Form.Item
                          label={formatMessage(
                            'applicationContractor.columns.contractVehicle.name',
                          )}
                        >
                          {getFieldDecorator('contractVehicle', {
                            initialValue: contractorInfo.contractVehicle,
                          })(<Input disabled={false} maxLength={50} />)}
                        </Form.Item>
                      </div>
                      <div className={Style.row}>
                        {formatMessage('applicationContractor.text.partB.possify')}
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.annexes.name')}
                        // extra="表格扫描文件"
                        >
                          {getFieldDecorator('drive_certificate_base64', {
                            initialValue: contractorInfo.drive_certificate_base64,
                            valuePropName: 'fileList',
                            getValueFromEvent: this.normFile,
                          })(
                            <Upload
                              disabled={false}
                              accept=".pdf,image/*"
                              listType="picture"
                              customRequest={async ({ file, onSuccess }) => {
                                const base64 = await new Promise(resolve => {
                                  const fileReader = new FileReader();
                                  fileReader.readAsDataURL(file);
                                  fileReader.onload = () => {
                                    resolve(fileReader.result);
                                  };
                                });
                                onSuccess(base64);
                                return {
                                  abort() { },
                                };
                              }}
                              onPreview={this.handlePhotographPreview}
                            >
                              {annexesUpload ? (
                                <Button disabled={disabled}>
                                  <Icon type="upload" />
                                  {formatMessage('applicationStaff.columns.annexes.button')}
                                </Button>
                              ) : null}
                            </Upload>,
                          )}
                        </Form.Item>
                      </div>
                      <div className={Style.row}>
                        {formatMessage('applicationContractor.text.partB.atteify')}
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.annexes.name')}
                        // extra="表格扫描文件"
                        >
                          {getFieldDecorator('safety_certificate_base64', {
                            initialValue: contractorInfo.safety_certificate_base64,
                            valuePropName: 'fileList',
                            getValueFromEvent: this.normFile,
                          })(
                            <Upload
                              disabled={false}
                              accept=".pdf,image/*"
                              listType="picture"
                              customRequest={async ({ file, onSuccess }) => {
                                const base64 = await new Promise(resolve => {
                                  const fileReader = new FileReader();
                                  fileReader.readAsDataURL(file);
                                  fileReader.onload = () => {
                                    resolve(fileReader.result);
                                  };
                                });
                                onSuccess(base64);
                                return {
                                  abort() { },
                                };
                              }}
                              onPreview={this.handlePhotographPreview}
                            >
                              {annexesUpload ? (
                                <Button disabled={disabled}>
                                  <Icon type="upload" />
                                  {formatMessage('applicationStaff.columns.annexes.button')}
                                </Button>
                              ) : null}
                            </Upload>,
                          )}
                        </Form.Item>
                      </div>
                      <div className={Style.row}>
                        {formatMessage('applicationContractor.text.partB.depm')}
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.annexes.name')}
                        // extra="表格扫描文件"
                        >
                          {getFieldDecorator('inspect_certificate_base64', {
                            initialValue: contractorInfo.inspect_certificate_base64,
                            valuePropName: 'fileList',
                            getValueFromEvent: this.normFile,
                          })(
                            <Upload
                              disabled={false}
                              accept=".pdf,image/*"
                              listType="picture"
                              customRequest={async ({ file, onSuccess }) => {
                                const base64 = await new Promise(resolve => {
                                  const fileReader = new FileReader();
                                  fileReader.readAsDataURL(file);
                                  fileReader.onload = () => {
                                    resolve(fileReader.result);
                                  };
                                });
                                onSuccess(base64);
                                return {
                                  abort() { },
                                };
                              }}
                              onPreview={this.handlePhotographPreview}
                            >
                              {annexesUpload ? (
                                <Button disabled={disabled}>
                                  <Icon type="upload" />
                                  {formatMessage('applicationStaff.columns.annexes.button')}
                                </Button>
                              ) : null}
                            </Upload>,
                          )}
                        </Form.Item>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div className={Style.part}>
                <div className={Style.title}>
                  <strong>Part C</strong>
                  <i>(TO BE COMPLETED BY SECURITY DEPARTMENT AIRPORT AUTHORITY HONG KONG)</i>
                </div>
                <div className={Style.main}>
                  <div className={Style.detailWrapper}>
                    {/* eslint-disable-next-line react/no-unescaped-entities */}
                    <div>{formatMessage('applicationContractor.text.partC.relevant')}</div>
                    <div className={Style.table}>
                      {
                        currentUser.role_id === '110' ? null :
                          <div className={Style.row}>
                            <Form.Item
                              label={formatMessage(
                                'applicationContractor.columns.checkedApproved.name',
                              )}
                            >
                              {getFieldDecorator('checkedApproved', {
                                initialValue: contractorInfo.checkedApproved,
                              })(
                                <Radio.Group disabled={disabled}>
                                  {/* {currentUser.role_id === '110' ? contractorInfo.checkedApproved === 1 ? <Radio value={1}>
                                    <FormattedMessage id="applicationContractor.columns.checkedApproved.approved" />
                                  </Radio> : null : <Radio value={1}>
                                    <FormattedMessage id="applicationContractor.columns.checkedApproved.approved" />
                                  </Radio>} */}
                                  {
                                    currentUser.role_id !== '110' ? (
                                      <Radio value={1}>
                                        <FormattedMessage id="applicationStaff.columns.checkedApproved.approved" />
                                      </Radio>
                                    ) : null
                                  }
                                  <Radio value={-1}>
                                    <FormattedMessage id="applicationStaff.columns.checkedApproved.disapproved" />
                                  </Radio>


                                  {
                                    currentUser.role_id === '100' ? (
                                      <Radio value={3}>
                                        <FormattedMessage id="applicationContractor.temporary.cancelled" />
                                      </Radio>
                                    ) : null
                                  }
                                  <Radio value={0}>
                                    <FormattedMessage id="baseInfo.needApprovalStatus" />
                                  </Radio>
                                  {/* <Radio value={-1}>
                                    <FormattedMessage id="applicationContractor.columns.checkedApproved.disapproved" />
                                  </Radio>
                                  <Radio value={0}>
                                    <FormattedMessage id="baseInfo.needApprovalStatus" />
                                  </Radio> */}
                                </Radio.Group>,
                              )}
                            </Form.Item>
                          </div>
                      }
                      <div className={Style.row}>
                        <Form.Item
                          label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                        >
                          {getFieldDecorator('checkedExpiry', {
                            initialValue: contractorInfo.checkedExpiry
                              ? moment(contractorInfo.checkedExpiry)
                              : null,
                            rules: [
                              {
                                required: true,
                                message: formatMessage(
                                  'applicationCommon.workerCard.expiredDate.errMessage',
                                ),
                              },
                            ],
                          })(<DatePicker disabled={disabled} format={formatMessage('datetimeFormat.date')} />)}
                        </Form.Item>
                        {/* <Form.Item
                            label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                          >
                            {getFieldDecorator('checkedExpiry', {
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(<DatePicker format={formatMessage('datetimeFormat.date')} />)}
                          </Form.Item> */}
                      </div>
                      <div className={Style.row}>
                        {formatMessage('applicationContractor.text.partC.restrictions')}
                      </div>
                      <div className={Style.row}>
                        <div>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.checkedClassification.name',
                            )}
                          >
                            {getFieldDecorator('checkedClassification', {
                              initialValue: contractorInfo.checkedClassification,
                            })(<Input disabled={disabled} maxLength={50} />)}
                          </Form.Item>
                        </div>
                      </div>
                      <div className={Style.row}>
                        <Form.Item
                          label={
                            <span>
                              {formatMessage('applicationContractor.columns.checkedSpecified.name')}
                              &nbsp;
                              <Tooltip disabled={disabled} title={zoneTips}>
                                <Icon type="question-circle-o" />
                              </Tooltip>
                            </span>
                          }
                        >
                          {area == null ? (
                            <Spin spinning />
                          ) : (
                            getFieldDecorator('checkedSpecified', {
                              initialValue: contractorInfo.checkedSpecified,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationContractor.columns.checkedSpecified.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <Checkbox.Group disabled={disabled} name="checkedSpecified">
                                {area.map(item => (
                                  <Checkbox
                                    key={item.id}
                                    value={item.id}
                                    disabled={item.status !== 1}
                                  >
                                    {item.areaCode}
                                  </Checkbox>
                                ))}
                              </Checkbox.Group>,
                            )
                          )}
                        </Form.Item>
                      </div>
                      <div className={Style.row}>
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.checkedReasons.name')}
                        >
                          {getFieldDecorator('checkedReasons', {
                            initialValue: contractorInfo.checkedReasons,
                          })(<Input disabled={disabled} maxLength={50} />)}
                        </Form.Item>
                      </div>
                    </div>
                  </div>
                </div>
                <Form.Item
                  label={formatMessage('applicationContractor.columns.annexes.name')}
                // extra="表格扫描文件"
                >
                  {getFieldDecorator('annexes', {
                    initialValue: contractorInfo.annexes,
                    valuePropName: 'fileList',
                    getValueFromEvent: this.normFile,
                  })(
                    <Upload
                      disabled={disabled}
                      accept=".pdf,image/*"
                      listType="picture"
                      customRequest={async ({ file, onSuccess }) => {
                        const base64 = await new Promise(resolve => {
                          const fileReader = new FileReader();
                          fileReader.readAsDataURL(file);
                          fileReader.onload = () => {
                            resolve(fileReader.result);
                          };
                        });
                        onSuccess(base64);
                        return {
                          abort() { },
                        };
                      }}
                      onPreview={this.handlePhotographPreview}
                    >
                      {annexesUpload ? (
                        <Button disabled={disabled}>
                          <Icon type="upload" />
                          {formatMessage('applicationStaff.columns.annexes.button')}
                        </Button>
                      ) : null}
                    </Upload>,
                  )}
                </Form.Item>
                <Form.Item
                  label={formatMessage('applicationContractor.columns.annexes.groupname')}
                >
                  {getFieldDecorator('groupName', {
                    initialValue: contractorInfo.listName,
                    rules: [
                      {
                        required: false,
                        message: formatMessage(
                          'applicationCommon.workerCard.name.errMessage',
                        ),
                      },
                    ],
                  })(
                    <CreatableSelect
                      isDisabled={disabled}
                      styles={{
                        menu: base => ({
                          ...base,
                          zIndex: 10,
                        }),
                        control: base => ({
                          ...base,
                          height: '35px !important',
                        }),
                        input: base => ({
                          ...base,
                          height: '35px !important',
                          // backgroundColor: 'pink',
                        }),
                        multiValue: base => ({
                          ...base,
                          // backgroundColor: 'pink',
                          height: '25px !important',
                          display: 'flex',
                          alignItems: 'center',
                        }),
                        valueContainer: base => ({
                          ...base,
                          height: '35px !important',
                        }),
                      }}
                      isMulti
                      menuIsOpen={menuIsopentwo}
                      onMenuOpen={() => {
                        this.setState({
                          menuIsopentwo: !menuIsopentwo,
                        })
                      }}
                      onMenuClose={() => {
                        if (creatSeleteModal) {
                          return;
                        }
                        this.setState({
                          menuIsopentwo: false,
                        })
                      }}
                      components={{ Option: e => this.Option(e, 'gro') }}
                      onCreateOption={this.onCreateOption}
                      onChange={this.onChangeselete}
                      options={groupList}
                      value={grouplist}
                      placeholder={formatMessage('baseInfo.placeholderChecked')}
                    />,
                    //   <Select
                    //   dropdownRender={menu => (
                    //     <>
                    //       {menu}
                    //       <div>
                    //         <a style={{ padding: 10 }}>{formatMessage(
                    //           'applicationContractor.columns.annexes.creatgroupname',
                    //         )}</a>
                    //       </div>
                    //     </>
                    //   )}
                    //   mode="multiple"
                    //   allowClear
                    //   style={{ width: '50%' }}
                    //   placeholder={formatMessage('baseInfo.placeholderChecked')}
                    //   onChange={this.handleChange}
                    // >
                    //   {this.childrenGroup(groupList)}
                    //   </Select>
                  )}
                </Form.Item>
              </div>

              <div className={Style.part}>
                <div className={Style.title}>
                  <strong>Card</strong>
                </div>
                <div className={Style.main}>
                  <div className={Style.detailWrapper}>
                    <div className={Style.table}>
                      {/* 绿卡 */}
                      <div className={Style.row}>
                        <FormattedMessage id="applicationCommon.workerCard.greenCard" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.name.name')}
                          >
                            {getFieldDecorator('workerCardName1', {
                              initialValue: contractorInfo.workerCardName1,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} disabled />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item label={formatMessage('applicationCommon.workerCard.num.name')}>
                            {getFieldDecorator('workerCardNo1', {
                              initialValue: contractorInfo.workerCardNo1,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.num.errMessage',
                                  ),
                                },
                              ],
                            })(<Input disabled={false} maxLength={50} autoComplete="off" />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                          >
                            {getFieldDecorator('workerCardExpiredDate1', {
                              initialValue: contractorInfo.workerCardExpiredDate1
                                ? moment(contractorInfo.workerCardExpiredDate1)
                                : null,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(<DatePicker disabled={false} format={formatMessage('datetimeFormat.date')} />)}
                          </Form.Item>
                        </div>
                      </div>
                      <Form.Item
                        label={formatMessage('applicationContractor.columns.annexes.name')}
                      // extra="表格扫描文件"
                      >
                        {getFieldDecorator('green_base64', {
                          initialValue: contractorInfo.green_base64,
                          valuePropName: 'fileList',
                          getValueFromEvent: this.normFile,
                        })(
                          <Upload
                            disabled={false}
                            accept=".pdf,image/*"
                            listType="picture"
                            customRequest={async ({ file, onSuccess }) => {
                              const base64 = await new Promise(resolve => {
                                const fileReader = new FileReader();
                                fileReader.readAsDataURL(file);
                                fileReader.onload = () => {
                                  resolve(fileReader.result);
                                };
                              });
                              onSuccess(base64);
                              return {
                                abort() { },
                              };
                            }}
                            onPreview={this.handlePhotographPreview}
                          >
                            {annexesUpload ? (
                              <Button disabled={false}>
                                <Icon type="upload" />
                                {formatMessage('applicationStaff.columns.annexes.button')}
                              </Button>
                            ) : null}
                          </Upload>,
                        )}
                      </Form.Item>
                      {/* 工人注册卡 */}
                      <div className={Style.row}>
                        <FormattedMessage id="applicationCommon.workerCard.registerCard" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.name.name')}
                          >
                            {getFieldDecorator('workerCardName2', {
                              initialValue: contractorInfo.workerCardName2,
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo2'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} disabled />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item label={formatMessage('applicationCommon.workerCard.num.name')}>
                            {getFieldDecorator('workerCardNo2', {
                              initialValue: contractorInfo.workerCardNo2,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.num.errMessage',
                                  ),
                                },
                              ],
                            })(<Input disabled={false} maxLength={50} autoComplete="off" />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                          >
                            {getFieldDecorator('workerCardExpiredDate2', {
                              initialValue: contractorInfo.workerCardExpiredDate2
                                ? moment(contractorInfo.workerCardExpiredDate2)
                                : null,
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo2'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(<DatePicker disabled={false} format={formatMessage('datetimeFormat.date')} />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.workType.name')}
                          >
                            {getFieldDecorator('workerCardWorkType2', {
                              initialValue: contractorInfo.workerCardWorkType2,
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo2'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.workType.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <Select
                                disabled={false}
                                showSearch
                                style={{ width: '100%' }}
                                optionFilterProp="children"
                                filterOption={(input, option) =>
                                  option.props.children
                                    .toLowerCase()
                                    .indexOf(input.toLowerCase()) >= 0
                                }
                                loading={workerType === null}
                                placeholder={formatMessage('baseInfo.placeholderChecked')}
                              >
                                {Array.isArray(workerType)
                                  ? workerType.map(item => (
                                    <Select.Option
                                      key={item.id}
                                      value={item.id}
                                    >{`${item.code} - ${item.nameZh}`}</Select.Option>
                                  ))
                                  : null}
                              </Select>,
                            )}
                          </Form.Item>
                        </div>
                      </div>
                      <Form.Item
                        label={formatMessage('applicationContractor.columns.annexes.name')}
                      // extra="表格扫描文件"
                      >
                        {getFieldDecorator('regist_base64', {
                          initialValue: contractorInfo.regist_base64,
                          valuePropName: 'fileList',
                          getValueFromEvent: this.normFile,
                        })(
                          <Upload
                            disabled={false}
                            accept=".pdf,image/*"
                            listType="picture"
                            customRequest={async ({ file, onSuccess }) => {
                              const base64 = await new Promise(resolve => {
                                const fileReader = new FileReader();
                                fileReader.readAsDataURL(file);
                                fileReader.onload = () => {
                                  resolve(fileReader.result);
                                };
                              });
                              onSuccess(base64);
                              return {
                                abort() { },
                              };
                            }}
                            onPreview={this.handlePhotographPreview}
                          >
                            {annexesUpload ? (
                              <Button disabled={false}>
                                <Icon type="upload" />
                                {formatMessage('applicationStaff.columns.annexes.button')}
                              </Button>
                            ) : null}
                          </Upload>,
                        )}
                      </Form.Item>
                      {/* 蓝卡 */}
                      <div className={Style.row}>
                        <FormattedMessage id="applicationCommon.workerCard.blueCard" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.name.name')}
                          >
                            {getFieldDecorator('workerCardName3', {
                              initialValue: contractorInfo.workerCardName3,
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo3'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} disabled />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item label={formatMessage('applicationCommon.workerCard.num.name')}>
                            {getFieldDecorator('workerCardNo3', {
                              initialValue: contractorInfo.workerCardNo3,
                            })(<Input disabled={false} maxLength={50} autoComplete="off" />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                          >
                            {getFieldDecorator('workerCardExpiredDate3', {
                              initialValue: contractorInfo.workerCardExpiredDate3
                                ? moment(contractorInfo.workerCardExpiredDate3)
                                : null,
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo3'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(<DatePicker disabled={false} format={formatMessage('datetimeFormat.date')} />)}
                          </Form.Item>
                        </div>
                      </div>
                      {/* 自定义 */}
                      <div className={Style.row}>
                        <FormattedMessage id="applicationCommon.workerCard.customizeCard" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.name.name')}
                          >
                            {getFieldDecorator('workerCardName4', {
                              initialValue: contractorInfo.workerCardName4,
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo4'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(<Input disabled={false} maxLength={50} />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item label={formatMessage('applicationCommon.workerCard.num.name')}>
                            {getFieldDecorator('workerCardNo4', {
                              initialValue: contractorInfo.workerCardNo4,
                            })(<Input disabled={false} maxLength={50} autoComplete="off" />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                          >
                            {getFieldDecorator('workerCardExpiredDate4', {
                              initialValue: contractorInfo.workerCardExpiredDate4
                                ? moment(contractorInfo.workerCardExpiredDate4)
                                : null,
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo4'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(<DatePicker disabled={false} format={formatMessage('datetimeFormat.date')} />)}
                          </Form.Item>
                        </div>
                      </div>
                      {/* 自定义2 */}
                      <div className={Style.row}>
                        <FormattedMessage id="applicationCommon.workerCard.customizeCard" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.name.name')}
                          >
                            {getFieldDecorator('workerCardName5', {
                              initialValue: contractorInfo.workerCardName5,
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo5'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(<Input disabled={false} maxLength={50} />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item label={formatMessage('applicationCommon.workerCard.num.name')}>
                            {getFieldDecorator('workerCardNo5', {
                              initialValue: contractorInfo.workerCardNo5,
                            })(<Input disabled={false} maxLength={50} autoComplete="off" />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                          >
                            {getFieldDecorator('workerCardExpiredDate5', {
                              initialValue: contractorInfo.workerCardExpiredDate5
                                ? moment(contractorInfo.workerCardExpiredDate5)
                                : null,
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo5'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(<DatePicker disabled={false} format={formatMessage('datetimeFormat.date')} />)}
                          </Form.Item>
                        </div>
                      </div>
                      {/* 疫苗日期 */}
                      <div className={`${Style.row} ${Style.rowTitle}`}>
                        <FormattedMessage id="applicationCommon.workerCard.vaccination_date" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.vaccination_date1')}
                          >
                            {getFieldDecorator('vaccination_date1', {
                              initialValue: contractorInfo.vaccination_date1
                                ? moment(contractorInfo.vaccination_date1)
                                : null,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(<DatePicker disabled={false} format={formatMessage('datetimeFormat.date')} />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.vaccination_date2')}
                          >
                            {getFieldDecorator('vaccination_date2', {
                              initialValue: contractorInfo.vaccination_date2
                                ? moment(contractorInfo.vaccination_date2)
                                : null,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <DatePicker
                                disabled={!form.getFieldValue('vaccination_date1')}
                                format={formatMessage('datetimeFormat.date')}
                              />,
                            )}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.vaccination_date3')}
                          >
                            {getFieldDecorator('vaccination_date3', {
                              initialValue: contractorInfo.vaccination_date3
                                ? moment(contractorInfo.vaccination_date3)
                                : null,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <DatePicker
                                disabled={
                                  !(
                                    form.getFieldValue('vaccination_date1') &&
                                    form.getFieldValue('vaccination_date2')
                                  )
                                }
                                format={formatMessage('datetimeFormat.date')}
                              />,
                            )}
                          </Form.Item>
                        </div>
                      </div>
                      <div className={`${Style.row} ${Style.column3}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.vaccination_date4')}
                          >
                            {getFieldDecorator('vaccination_date4', {
                              initialValue: contractorInfo.vaccination_date4
                                ? moment(contractorInfo.vaccination_date4)
                                : null,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <DatePicker
                                disabled={
                                  !(
                                    form.getFieldValue('vaccination_date1') &&
                                    form.getFieldValue('vaccination_date2') &&
                                    form.getFieldValue('vaccination_date3')
                                  )
                                }
                                format={formatMessage('datetimeFormat.date')}
                              />,
                            )}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.vaccination_date5')}
                          >
                            {getFieldDecorator('vaccination_date5', {
                              initialValue: contractorInfo.vaccination_date5
                                ? moment(contractorInfo.vaccination_date5)
                                : null,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <DatePicker
                                disabled={
                                  !(
                                    form.getFieldValue('vaccination_date1') &&
                                    form.getFieldValue('vaccination_date2') &&
                                    form.getFieldValue('vaccination_date3') &&
                                    form.getFieldValue('vaccination_date4')
                                  )
                                }
                                format={formatMessage('datetimeFormat.date')}
                              />,
                            )}
                          </Form.Item>
                        </div>
                      </div>
                      <Form.Item
                        label={formatMessage('applicationContractor.columns.annexes.name')}
                      // extra="表格扫描文件"
                      >
                        {getFieldDecorator('vacc_base64', {
                          initialValue: contractorInfo.vacc_base64,
                          valuePropName: 'fileList',
                          getValueFromEvent: this.normFile,
                        })(
                          <Upload
                            disabled={false}
                            accept=".pdf,image/*"
                            listType="picture"
                            customRequest={async ({ file, onSuccess }) => {
                              const base64 = await new Promise(resolve => {
                                const fileReader = new FileReader();
                                fileReader.readAsDataURL(file);
                                fileReader.onload = () => {
                                  resolve(fileReader.result);
                                };
                              });
                              onSuccess(base64);
                              return {
                                abort() { },
                              };
                            }}
                            onPreview={this.handlePhotographPreview}
                          >
                            {annexesUpload ? (
                              <Button disabled={false}>
                                <Icon type="upload" />
                                {formatMessage('applicationStaff.columns.annexes.button')}
                              </Button>
                            ) : null}
                          </Upload>,
                        )}
                      </Form.Item>
                      <div className={Style.row}>
                        <FormattedMessage id="applicationCommon.workerCard.include" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div style={{ display: 'flex' }}>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.include')}
                          >
                            {getFieldDecorator('isInfected', {
                              initialValue: contractorInfo.isInfected === 2,
                              // initialValue: contractorInfo.isBlack === 2,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <Checkbox
                                disabled={false}
                                checked={form.getFieldValue('isInfected')}
                                name="isInfected"
                              ></Checkbox>,
                            )}
                          </Form.Item>
                          <Form.Item
                            label=""
                          >
                            {getFieldDecorator('inspection_exemption_time', {
                              initialValue: contractorInfo.inspection_exemption_time
                                ? moment(contractorInfo.inspection_exemption_time)
                                : null,
                              rules: [
                                {
                                  required: form.getFieldValue('isInfected'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <DatePicker
                                disabled={!form.getFieldValue('isInfected')}
                                format={formatMessage('datetimeFormat.date')}
                              />,
                            )}
                          </Form.Item>
                        </div>
                      </div>
                      <Form.Item
                        label={formatMessage('applicationContractor.columns.annexes.name')}
                      // extra="表格扫描文件"
                      >
                        {getFieldDecorator('exemption_base64', {
                          initialValue: contractorInfo.exemption_base64,
                          valuePropName: 'fileList',
                          getValueFromEvent: this.normFile,
                        })(
                          <Upload
                            disabled={false}
                            accept=".pdf,image/*"
                            listType="picture"
                            customRequest={async ({ file, onSuccess }) => {
                              const base64 = await new Promise(resolve => {
                                const fileReader = new FileReader();
                                fileReader.readAsDataURL(file);
                                fileReader.onload = () => {
                                  resolve(fileReader.result);
                                };
                              });
                              onSuccess(base64);
                              return {
                                abort() { },
                              };
                            }}
                            onPreview={this.handlePhotographPreview}
                          >
                            {annexesUpload ? (
                              <Button disabled={false}>
                                <Icon type="upload" />
                                {formatMessage('applicationStaff.columns.annexes.button')}
                              </Button>
                            ) : null}
                          </Upload>,
                        )}
                      </Form.Item>
                      <div className={Style.row}>
                        <FormattedMessage id="applicationCommon.workerCard.blacklist" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.isblacklist')}
                          >
                            {getFieldDecorator('isBlack', {
                              initialValue: contractorInfo.isBlack === 2,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <Checkbox
                                disabled={disabled}
                                checked={form.getFieldValue('isBlack')}
                                name="isBlack"
                              ></Checkbox>,
                            )}
                          </Form.Item>
                        </div>
                      </div>
                      <div className={Style.row}>
                        <FormattedMessage id="applicationContractor.temporary.email" />
                      </div>
                      <div className={`${Style.row}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationContractor.temporary.email')}
                          >
                            {getFieldDecorator('email', {
                              initialValue: contractorInfo.email,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationContractor.temporary.errMessage.email',
                                  ),
                                },
                              ],
                            })(<Input disabled={false} maxLength={255} />)}
                          </Form.Item>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className={Style.partone}>
                <div className={Style.main}>
                  <div className={Style.detailWrapper}>
                    <div className={Style.table}>
                      <div className={`${Style.row}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.readerCard.passno')}
                          >
                            {getFieldDecorator('newcardNo', {
                              initialValue: contractorInfo.card_no,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(<Input disabled={disabled} maxLength={50} />)}
                          </Form.Item>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className={Style.part}>
                <div className={Style.title}>
                  <strong>{formatMessage('baseInfo.approvehistory')}</strong>
                </div>
                <div className={Style.main}>
                  <div className={Style.detailWrapper}>
                    <Table
                      loading={!!saveLoading}
                      rowKey="id"
                      columns={this.renderColumns()}
                      pagination={false}
                      dataSource={contractorInfo?.contractor_approve_operates}
                    />
                  </div>
                </div>
              </div>
              <div className={Style.bottom}>
                <Button htmlType="button" onClick={this.handleReset}>
                  {formatMessage('button.reset')}
                </Button>
                <Authorized authority={Power.ContractorApplication.modify}>
                  <Button type="primary" htmlType="submit">
                    {formatMessage('button.save')}
                  </Button>
                </Authorized>
              </div>
            </Form>
          </div>
        </Spin>
      </PageHeaderWrapper>
    );
  }
}

export default Index;
